<template>
	<view>
		<u-navbar back-text="返回" title="简历管理" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }" back-icon-color="#108EE9">
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160" :error-type=" ['toast']" :label-style="{fontSize:'28rpx',color:'rgba(153,153,153,1)'}">
				<u-form-item label="工种:" prop="name" label-position="top">
					<view class="work-status" @click="showKindType=true">
						{{ form.kindList?form.kindList:'请选择' }}
						<image src="../../../static/images/common/right.png" mode=""></image>
					</view>
				</u-form-item>
			</u-form>
			<view class="job-box">
				<view class="job-item">
					<view class="item-title">
						<view class="head-box">
							<view class="head-img">
								<image src="../../../static/images/develop/headimg.png" mode=""></image>
							</view>
							<image src="../../../static/images/home/authicon.png" mode=""></image>
						</view>
						<view class="head-right">
							<view class="name-box">
								王建国 <text>
									找工作
								</text>
							</view>
							<view class="grade-box">
								<image src="../../../static/images/common/grade-icon.png" mode=""></image>
								<image src="../../../static/images/common/grade-icon.png" mode=""></image>
								<image src="../../../static/images/common/grade-icon.png" mode=""></image>
								<image src="../../../static/images/common/grade-icon.png" mode=""></image>
								<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="job-name">
						工种：<text>
							塔吊司机
						</text>
					</view>
					<view class="user-introduce">
						自我介绍：本人找工作，从事项目工地设备垂直运输管理（塔吊，电梯）工作已经5年了备垂直运输管理（塔吊，电梯）工作已经5备垂直运输管理（塔吊，电梯）工作已经5
					</view>
					<view class="job-name job-address">
						期望工作地：：<text>
							成都市
						</text>
					</view>
					<view class="item-foot">
						<view class="item-left-btn" @click="goAppraise">
							评价
						</view>
						<view class="item-right-btn">
							确定入职
						</view>
					</view>
					<view class="working-time">
						用工时间前8小时可以点击
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="showKindType" mode="mutil-column-auto" :list="kindList" @confirm="selectJobType"></u-select>
	</view>
</template>

<script>
	import multipleMixin from '@/mixin/multiple-data-mixin';
	export default{
		mixins: [multipleMixin],
		data(){
			return{
				showKindType:false,
				form:{
					kindList:''
				},
				rules:{
					
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			selectJobType(e) {
				this.form.kindList = e[2].label
			},
			goAppraise(){
				this.$u.route({
					url: 'pages/recruit/appraise/add',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		.work-status {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 43rpx;
			color: rgba(102, 102, 102, 1);
			opacity: 1;
		
			.kind-item {
				position: relative;
				padding: 6rpx;
				margin-left: 20rpx;
		
				image {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					top: -14rpx;
					right: -10rpx;
				}
			}
		
			.kind-right {
				margin-top: 16rpx;
			}
		
			image {
				width: 14rpx;
				height: 24rpx;
				margin-top: 12rpx;
				margin-left: 24rpx;
			}
		}
		.job-box{
			width: 100%;
			margin-top: 37rpx;
			.job-item{
				margin-top: 30rpx;
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background:rgba(255,255,255,1);
				box-shadow:0px 8rpx 20rpx rgba(0,0,0,0.1);
				opacity:1;
				border-radius:20rpx;
				.item-title{
					display: flex;
					margin-bottom: 40rpx;
					.head-box{
						position: relative;
						.head-img{
							width: 75rpx;
							height: 75rpx;
							image{
								width: 75rpx;
								height: 75rpx;
								border-radius: 50%;
							}
						}
						image{
							position: absolute;
							bottom: -13rpx;
							right: -12rpx;
							width: 24rpx;
							height: 26rpx;
						}
					}
					.head-right{
						margin-left: 40rpx;
						.name-box{
							font-size:32rpx;
							font-weight:bold;
							line-height:43rpx;
							color:rgba(51,51,51,1);
							opacity:1;
							text{
								display: inline-block;
								margin-left: 20rpx;
								margin-top: 4rpx;
								padding: 6rpx 10rpx;
								background:rgba(0,204,204,1);
								border-radius:60rpx;
								font-size:22rpx;
								font-weight:400;
								line-height:20rpx;
								color:rgba(255,255,255,1);
								opacity:1;
							}
						}
						.grade-box{
							display: flex;
							margin-top: 14rpx;
							image{
								width: 24rpx;
								height: 24rpx;
								margin-right: 14rpx;
							}
						}
					}
				}
				.job-name{
					font-size:22rpx;
					font-weight:bold;
					line-height:30rpx;
					color:rgba(153,153,153,1);
					opacity:1;
					text{
						font-size:26rpx;
						font-weight:bold;
						line-height:35rpx;
						color:rgba(51,51,51,1);
						opacity:1;
					}
				}
				.user-introduce{
					margin-bottom: 20rpx;
					margin-top: 14rpx;
					width: 100%;
					font-size:24rpx;
					font-weight:400;
					line-height:32rpx;
					color:rgba(51,51,51,1);
					opacity:1;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.job-address{
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid rgba(223,223,223,1);
				}
				.item-foot{
					margin-top: 30rpx;
					display: flex;
					justify-content: space-around;
					.item-left-btn{
						width:240rpx;
						height:80rpx;
						border:1rpx solid rgba(211,176,104,1);
						opacity:1;
						border-radius:8rpx;
						text-align: center;
						line-height: 80rpx;
						font-size:28rpx;
						font-weight:bold;
						color:rgba(211,176,104,1);
						opacity:1;
					}
					.item-right-btn{
						width:240rpx;
						height:80rpx;
						background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
						opacity:1;
						border-radius:8rpx;
						text-align: center;
						line-height: 80rpx;
						font-size:28rpx;
						font-weight:bold;
						color:rgba(255,255,255,1);
						opacity:1;
					}
				}
				.working-time{
					margin-top: 6rpx;
					font-size:22rpx;
					font-weight:400;
					line-height:30rpx;
					color:rgba(255,0,0,1);
					opacity:1;
				}
			}
		}
	}
</style>
